/*
 * @Author: Yejing
 * @Date: 2023-06-10 10:31:18
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 10:31:18
 * @Description: desc
 */
<template>
	<view>
		<c-navigation-bar :title="search.title" :navType='search.navType' naverSearchActive='transparent' :navPlaceholder='search.navPlaceholder'
			:navThmen='search.navThmen' @focusEvent='focusEvent' @switchSvgEvent='switchSvgEvent'>
		</c-navigation-bar>
		<view class="container-box">
			<scroll-view @click="clickHistory" @scrolltoupper="moreMessage" class="histories" scroll-y
				scroll-with-animation :scroll-into-view="scroolTo">
				<view class="item" :id="'msg'+item.id" :class="item.is_mime?'mime':''" v-for="(item,index) in histories"
					:key="index">
					<!-- <image class="avatar" :src="item.from_user_info.avatar" mode="aspectFill" v-if="!item.is_mime" /> -->
					<view class="text" :class="item.is_mime?'activity':'normal'" v-if="item.type=='文本'">{{item.data}}
					</view>
					<!-- <image @click="preView(item.data)" class="image" :src="item.data" v-if="item.type=='图片'"
					mode="widthFix" /> -->
					<!-- 				<image class="avatar" :src="item.from_user_info.avatar" mode="aspectFill" v-if="item.is_mime" /> -->
				</view>
				<view style="width: 100%;height: 30rpx;"></view>
			</scroll-view>
			<view class="bottomBar">
				<view class="iptLine">
					<input @keydown.enter="sendmsg" v-model="message" class="ipt" :focus="isFocus" />
					<view @click="clickEmojiBtn" class="emoji romoicon">
						<image style="height: 58rpx; width: 58rpx;" src="@/static/svg/face.svg" />
					</view>
					<view @click="clickMoreBtn" class="more romoicon" v-if="message==''">
						<image style="height: 58rpx; width: 58rpx;" src="@/static/svg/24gf-folderPlus.svg" />
					</view>
					<u-button @click="sendmsg" type="primary" class="sendBtn" v-else>发送</u-button>
				</view>
				<view class="emojiBox" :class="showMoreBox=='emoji'?'activity':''">
					<view class="emojis">
						<view @click="clickEmoji(item)" class="item" v-for="(item,index) in emojis" :key="index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="moreBox" :class="showMoreBox=='more'?'activity':''">
					<view @click="sendImg('album')" class="menu">
						<view class="romoicon">
							<image style="height: 58rpx; width: 58rpx;" src="@/static/svg/photoalbum.svg" />
						</view>
						<view class="text">相册</view>
					</view>
					<view @click="sendImg('camera')" class="menu">
						<view class="romoicon">
							<image style="height: 58rpx; width: 58rpx;" src="@/static/svg/camera.svg" />
						</view>
						<view class="text">拍摄</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import emoji from "./emoji.json";
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: "客服聊天"
				},
				scroolTo: '',
				to_user: '',
				emojis: emoji.emojis,
				showMoreBox: '',
				from_user: '',
				message: '',
				histories: [{
					data: '5555',
					type: '文本',
					is_mime: true
				}, {
					data: '5555',
					type: '文本',
					is_mime: false
				}, {
					data: '5555',
					type: '图片',
					is_mime: false
				}],
				isFocus: true
			};
		},
		onLoad(options) {

		},
		methods: {
			closePops() {
				this.showMoreBox = '';
			},
			//底部滚动
			moreMessage() {

			},
			preView(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			sendmsg() {
				if (this.message == '') {
					return uni.showToast({
						icon: "none",
						title: "消息不能为空"
					})
				}

				this.histories.push({
					data: this.message,
					type: '文本',
					is_mime: true
				})
				this.message = '';
				this.showMoreBox = '';
				this.isFocus = true;
			},
			//调用相机和文件
			sendImg(sourceType) {
				uni.chooseImage({
					count: sourceType == 'album' ? 9 : 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [sourceType], //从相册选择
					success: res => {
						res.tempFilePaths.forEach((item, index) => {
							uni.uploadFile({
								url: 'uploadFile', //仅为示例，非真实的接口地址，请替换到真实的上传地址
								filePath: item,
								name: 'file',
								success: r2 => {
									let img = JSON.parse(r2.data).data;
								}
							});
						});
						this.showMoreBox = '';
					}
				});
			},
			clickHistory() {
				this.showMoreBox = '';
			},
			clickEmoji(item) {
				this.message += item;
			},
			clickEmojiBtn() {
				this.showMoreBox = this.showMoreBox == "emoji" ? "" : "emoji";
			},
			clickMoreBtn() {
				this.showMoreBox = this.showMoreBox == "more" ? "" : "more";
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f7f8;
	}

	.histories {
		padding: 0 20rpx;
		height: calc(100vh - 80rpx - 10rpx);
		padding-bottom: calc(70rpx + 20rpx * 2);
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.avatar {
				width: 95rpx;
				height: 95rpx;
				margin: 0 20rpx;
				border-radius: 50rpx
			}

			.text {
				padding: 10rpx 20rpx;
				border-radius: 10rpx;

				&.normal {
					background-color: white;
					border: 1rpx solid #E4E7ED;
					border-bottom-left-radius: 0;
				}

				&.activity {
					background-color: #3ab34a;
					color: white;
					border-bottom-right-radius: 0;
					border: none;
				}
			}

			.image {
				width: 50vw;
			}

			&.mime {
				justify-content: flex-end;
			}
		}
	}

	.bottomBar {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;

		.iptLine {
			display: flex;
			justify-content: space-around;
			background-color: #f0f2f5;
			width: 100vw;
			padding: 20rpx 20rpx;
			align-items: center;
			box-sizing: border-box;



			.ipt {
				background-color: white;
				width: 60vw;
				line-height: 70rpx;
				height: 70rpx;
				font-size: calc(70rpx - 40rpx);
				padding: 10rpx;
				border-radius: 6rpx;
			}

			.sendBtn {
				background-color: #3ab34a;
				color: white;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				margin: 0;
				// padding: 0;
			}
		}

		.emojiBox {
			width: 100vw;
			background-color: #f6f7f8;
			height: 0px;
			padding: 0px;
			transition: all 0.3s ease-out;
			overflow: hidden;

			.emojis {
				display: flex;
				flex-wrap: wrap;
				height: 260rpx;
				overflow-y: auto;

				.item {
					font-size: 50rpx;
					margin-left: 10rpx;
				}
			}

			&.activity {
				height: 340rpx;
				padding-top: 40rpx;
			}
		}

		.moreBox {
			width: 100vw;
			height: 0px;
			padding: 0px;
			background-color: #f6f7f8;
			transition: all 0.3s ease-out;
			display: flex;
			flex-wrap: wrap;

			.menu {
				width: 20%;
				margin-left: 5%;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 110rpx;
				height: 110rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				justify-content: center;
				margin-bottom: 40rpx;

				.romoicon,
				.iconfont {
					font-size: 54rpx;
				}

				.text {
					font-size: 20rpx;
				}
			}

			&.activity {
				height: 190rpx;
				padding-top: 40rpx;
			}
		}
	}
</style>